<template>
	<view class="news-card">
		<!-- 资讯封面 -->
		<image :src="news.cover" class="news-cover" mode="aspectFill"></image>
		<!-- 资讯标题 -->
		<view class="news-title">{{ news.title }}</view>
		<!-- 作者信息 -->
		<view class="author-info">
			<image :src="news.author.avatar" class="author-avatar" mode="aspectFill"></image>
			<view class="author-nickname">{{ news.author.nickname }}</view>
		</view>
		<!-- 资讯详情 -->
		<view class="news-desc" v-html="news.desc"></view>
		<!-- 统计信息 -->
		<view class="stats">
			<view class="stat-item">
				<uni-icons type="eye" size="16" color="#999"></uni-icons>
				<span>{{ news.readCount }} 阅读</span>
			</view>
			<view class="stat-item">
				<uni-icons type="hand-up" size="16" color="#999"></uni-icons>
				<span>{{ news.likeCount }} 点赞</span>
			</view>
			<view class="stat-item">
				<uni-icons type="chat" size="16" color="#999"></uni-icons>
				<span>{{ news.commentCount }} 评论</span>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 定义组件的props，接收资讯数据
	const props = defineProps({
		news: {
			type: Object,
			required: true
		}
	});

	// 解构props中的资讯数据
	const {
		news
	} = props;
</script>

<style scoped lang="scss">
	// 定义一些变量
	$card-padding: 16px;
	$card-border-radius: 8px;
	$stat-item-gap: 8px;
	$author-avatar-size: 24px;
	$author-info-gap: 8px;

	.news-card {
		box-sizing: border-box;
		width: 100%;
		border: 1px solid #ccc;
		border-radius: $card-border-radius;
		padding: $card-padding;
		margin-bottom: 16px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

		.news-cover {
			width: 100%;
			height: 200px;
			margin-bottom: 12px;
			border-radius: 4px;
		}

		.news-title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 8px;
		}

		.author-info {
			display: flex;
			align-items: center;
			gap: $author-info-gap;
			margin-bottom: 12px;

			.author-avatar {
				width: $author-avatar-size;
				height: $author-avatar-size;
				border-radius: 50%;
			}

			.author-nickname {
				font-size: 14px;
				color: #666;
			}
		}

		.news-desc {
			font-size: 14px;
			color: #666;
			line-height: 1.6;
			margin-bottom: 12px;
		}

		.stats {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.stat-item {
				display: flex;
				align-items: center;
				gap: $stat-item-gap;
				font-size: 14px;
				color: #999;
			}
		}
	}
</style>